<template>
  <view class="bg-white radius-lg padding margin-top margin-lr">
    <u-text text="今日日报评语" size="32rpx" color="#333"></u-text>
    <view v-for="item in dailyReport" :key="item.id">
      <u-divider></u-divider>
      <view class="flex align-center">
        <image style="width:40rpx;height:40rpx;" :src="item.icon" mode="aspectFit"></image>
        <u-text margin="0 0 0 10rpx" :text="item.subjectName" size="32rpx" color="#333333"></u-text>
      </view>
      <!-- 题目数量 -->
      <view class="flex align-center gap-sm margin-top-sm">
        <text class="text-df text-gray">一共</text>
        <view style="width: 100rpx">
          <u-input inputAlign="center" customStyle="height:40rpx" v-model="item.questionCount" type="number"></u-input>
        </view>
        <text class="text-df text-gray">道题目</text>
      </view>
      <!-- 评语 -->
      <view class="margin-top-sm bg-grey padding-sm radius">
        <u-textarea border="none" style="background:transparent" v-model="item.comment" placeholder="请输入补充评语"
          customStyle="height:100rpx"></u-textarea>
        <view style="width:100%; display: flex; justify-content: flex-end;" class="margin-top-sm">
          <u-button customStyle="width:144rpx;height:60rpx" shape="circle" color="#0060E6" text="生成评语"
            @click="handleSaveComment(item)"></u-button>
        </view>
      </view>
      <view class="margin-top-sm">
        <u-text color="#999" size="28rpx" text="完成状态"></u-text>
        <view class="flex align-center gap margin-top-xs">
          <view v-for="item in completeStatusList" :key="item.id" class="btn-item"
            :class="{ 'active': item.id === completeStatus }" @click="handleCompleteStatus(item)">
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="margin-top-sm">
        <u-text color="#999" size="28rpx" text="批改状态"></u-text>
        <view class="flex align-center gap-sm margin-top-xs">
          <view v-for="item in correctStatusList" :key="item.id" class="btn-item"
            :class="{ 'active': item.id === correctStatus }" @click="handleCorrectStatus(item)">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
const dailyReport = ref([
  {
    id: 1,
    subjectName: '语文',
    icon: '/static/image/img-chinese.png',
    questionCount: 10,
    completeStatus: 1,//1全部完成 2部分完成 3尚未动笔
    correctStatus: 1,//1全部批改 2部分批改 3尚未批改
  },
  {
    id: 1,
    subjectName: '数学',
    icon: '/static/image/img-math.png',
    questionCount: 10,
    completeStatus: 1,//1全部完成 2部分完成 3尚未动笔
    correctStatus: 1,//1全部批改 2部分批改 3尚未批改
  },
  {
    id: 1,
    subjectName: '英语',
    icon: '/static/image/img-english.png',
    questionCount: 10,
    completeStatus: 1,//1全部完成 2部分完成 3尚未动笔
    correctStatus: 1,//1全部批改 2部分批改 3尚未批改
  }
]);
const completeStatusList = ref([
  {
    id: 1,
    name: '全部完成',
  },
  {
    id: 2,
    name: '部分完成',
  },
  {
    id: 3,
    name: '尚未动笔',
  }
]);
const correctStatusList = ref([
  {
    id: 1,
    name: '全部批改',
  },
  {
    id: 2,
    name: '部分批改',
  },
  {
    id: 3,
    name: '尚未批改',
  }
]);
const completeStatus = ref(1);
const correctStatus = ref(1);

// 生成评语
const handleSaveComment = (item) => {
  console.log(item);
}
const handleCompleteStatus = (item) => {
  console.log(item);
  completeStatus.value = item.id;
}
const handleCorrectStatus = (item) => {
  console.log(item);
  correctStatus.value = item.id;
}
</script>
<style lang="scss" scoped>
.btn-item {
  width: 144rpx;
  height: 40rpx;
  border-radius: 50rpx;
  background: #F7F7F7;
  color: #333;
  text-align: center;
  line-height: 40rpx;
  flex: 1;
  padding: 14rpx 20rpx;

  &.active {
    background: #EBF3FF;
    color: #0060E6;
    border: solid 1px #0060E6;
  }
}
</style>